<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-form-item prop="username">
      <el-input
        @focus="verify('username')"
        v-model="ruleForm.username"
        placeholder="用户手机号"
      ></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
      <el-input
        @focus="verify('captcha')"
        v-model="ruleForm.captcha"
        placeholder="验证码"
      >
        <template slot="append">
          <el-button @click="seanCode"> 发送验证码 </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="nickname">
      <el-input
        @focus="verify('nickname')"
        v-model="ruleForm.nickname"
        placeholder="你的名字"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        @focus="verify('password')"
        v-model="ruleForm.password"
        placeholder="密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="newPassword">
      <el-input
        @focus="verify('newPassword')"
        v-model="ruleForm.newPassword"
        placeholder="确认密码"
      ></el-input>
    </el-form-item>
    <el-button type="primary" class="submit" @click="userRegister"
      >注册</el-button
    >
  </el-form>
</template>

<script>
import { verification, reginster } from "@/utils/indexApi";
export default {
  data() {
    const verificationTwicePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入二次密码"));
      } else if (value != this.ruleForm.password) {
        callback(new Error("密码必须一致"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "", // 手机号码
        nickname: "", // 昵称
        captcha: "", // 手机验证码
        password: "804829", // 密码
        newPassword: "804829", // 新密码
      },

      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            pattern: /^1\d{10}$/,
            message: "请输入合法的手机号",
            trigger: "blur",
          },
        ],
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: /^.{6,16}$/,
            message: "请至少输入6~16为的密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          // 二次验证密码 需要通过 validator 定义一个函数来进行验证
          {
            validator: verificationTwicePass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击发送验证码
    async seanCode() {
      if (this.ruleForm.username) {
        const res = await verification({ tel: this.ruleForm.username });
        const { code } = res.data;
        // 提示用户验证码

        this.$message.success(`验证码为 ${code}`);
      }
    },

    // clearValidate  移出表单的校验结果 传入带移出的表单项prop
    verify(prop) {
      this.$refs.ruleForm.clearValidate(prop);
    },

    // 点击注册
    userRegister() {
      // 对整个表单进行验证
      this.$refs.ruleForm.validate(async (callback) => {
        if (callback) {
          // 发送注册的请求
          // 结构 因为有一个是新的密码 不在请求参数中 所以性需要结构出来
          const { newPassword, ...props } = this.ruleForm;
          const res = await reginster(props);
          // console.log(res);
          // 发送成功就把数据储存到 store 中
          if (res) {
            // 如果返送成功就把注册的数据储存道 store 中
            this.$store.commit("userstore/setUserInfo", res.data);
            // 在注册成功之后就跳转到登录页 所以在注册成功就发出事件在登录组件监听显示登录页面
            this.$emit("succeed");
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ruleForm {
  padding: 25px;
}

.submit {
  width: 100%;
  margin-top: 10px;
}
</style>